<template>
  <div class="page-common-layout project-initiation-container">
    <div class="initiation-header">
      {{ menuName }}
      <a-button icon="edit" @click="handleEditor()" v-action:tdsxbl_edit>
        编辑
      </a-button>
    </div>
    <div class="initiation-main">
      <div class="introduce-container">
        <div class="base-info">
          <div class="data-item">
            <div class="label">项目类型：</div>
            <div class="value">
              {{ form.engType }}
            </div>
          </div>
          <div class="data-item">
            <div class="label">立项类型：</div>
            <div class="value">{{ form.type }}</div>
          </div>
          <div class="data-item">
            <div class="label">提交人：</div>
            <div class="value">{{ form.creator }}</div>
          </div>
          <div class="data-item">
            <div class="label">提交时间：</div>
            <div class="value">{{ form.createTime }}</div>
          </div>
        </div>
        <div class="remark">
          <div class="data-item">
            <div class="label">备注：</div>
            <div class="value">
              {{ form.remark }}
            </div>
          </div>
        </div>
      </div>
      <div class="file-container">
        <div
          class="form-item"
          v-for="(item, index) in form.childList"
          :key="index"
        >
          <div class="title">{{ item.name }}：</div>
          <div class="content">
            <bjUploadFile
              :viewMode="true"
              v-model="item.files"
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </div>
        </div>
      </div>
    </div>
    <!-- 单文件 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
    <!-- 编辑 -->
    <editorPage
      :key="editorPage.key"
      :visible.sync="editorPage.visible"
      :parameter="editorPage.source"
    ></editorPage>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { _getUUID } from "@/utils/util.js";
import { mapGetters } from "vuex";
import {
  getToken,
  downloadDfs,
  downLoadBatchFileByArraybuffer,
} from "@/utils/TopVUI";
//单文件预览
import previewModal from "@/pages/document/minio/previewModal";
//编辑
import editorPage from "./editorPage";
//附件上传
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
import { detailCanton } from "@/api/cantonManage";
export default {
  components: {
    previewModal,
    bjUploadFile,
    editorPage,
  },
  data() {
    return {
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //详情
      form: {
        uuid: "",
        //项目类型
        engType: "",
        //立项类型
        type: "",
        //文件
        childList: [],
        //备注
        remark: "",
        //创建人
        creator: "",
        //创建时间
        createTime: "",
      },
      //下载
      downloadLoading: false,
      //单文件预览
      previewModal: {
        visible: false,
        loading: false,
      },
      //编辑
      editorPage: {
        visible: false,
        key: _getUUID(),
        source: {},
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      await this.getDetail();
    },
    //编辑
    handleEditor() {
      this.editorPage.key = _getUUID();
      this.editorPage.source = this.form;
      this.editorPage.visible = true;
    },

    //下载压缩包
    handleDownloadZip() {
      let { uuid, nodeName } = this.currentTreeNode;
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/projectInitiationFile/exportZip?treeUuid=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, nodeName);
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //查询详情
    getDetail() {
      detailCanton({
        code: "TDSXBL",
      })
        .then((res) => {
          this.form = {
            //批注id
            uuid: res?.uuid ?? "",
            //项目类型
            engType: res?.engTypeDesc,
            //立项类型
            type: res?.typeDesc,
            //文件
            childList: res?.childList ?? [],
            //备注
            remark: res.remark,
            //创建人
            creator: res.creator,
            //创建时间
            createTime: res.createTime,
          };
          this.form.childList.forEach((item) => {
            item.files = JSON.parse(item.files ?? "[]");
          });
        })
        .catch((_) => {});
    },

    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },

    //下载
    downloadFile(file) {
      let { url } = file;
      downloadDfs(url);
    },
  },
};
</script>

<style lang="less" scoped>
.project-initiation-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  .initiation-header {
    height: 64px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #333333;
    flex-shrink: 0;
  }
  .initiation-main {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .introduce-container {
      height: 150px;
      background: rgba(250, 250, 250, 0.5);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #ededed;
      margin-bottom: 16px;
      padding: 0 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .data-item {
        display: flex;
        font-weight: 400;
        font-size: 14px;
        flex: 1;
        .label {
          color: #8a9295;
          flex-shrink: 0;
        }
        .value {
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:last-of-type {
          margin-right: 0;
        }
      }
      .base-info {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 20px;
        .data-item {
          .value {
            -webkit-line-clamp: 1;
          }
        }
      }
      .remark {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        .data-item {
          .value {
            -webkit-line-clamp: 2;
          }
        }
      }
    }
    .file-container {
      background: rgba(250, 250, 250, 0.5);
      border: 1px solid #ededed;
      display: flex;
      overflow: auto;
      padding: 30px 90px 30px 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .form-item {
        display: flex;
        font-size: 14px;
        color: #8a9295;
        margin-bottom: 24px;
        .title {
          white-space: pre-wrap;
          width: 70px;
          text-indent: 4px;
        }
        &:last-of-type {
          margin-bottom: 0;
        }
        .content {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          /deep/.bj-upload-file {
            .choosed-file-warp {
              width: 100%;
              .file-list {
                .base-info {
                  background: rgba(24, 144, 255, 0.1);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
